<script setup>
import { computed } from 'vue';

import { imgUrl } from '#/UrlsConfig.js';

const props = defineProps({
  url: {
    type: String,
    default: '',
  },
  fit: {
    type: String,
    default: 'cover',
  },
  srcList: {
    type: Array,
    default: () => [],
  },
});

const urlList = computed(() => {
  const imgList = [];
  try {
    JSON.parse(props.url).forEach((item) => {
      imgList.push(imgUrl + item.fileUrl);
    });
  } catch {
    props.url.forEach((item) => {
      (item.fileUrl && imgList.push(imgUrl + item.fileUrl)) ||
        imgList.push(imgUrl + item);
    });
  }
  console.log('imgList-------', imgList);
  return imgList;
});
console.log('img------------', props.url);
</script>

<template>
  <div class="demo-image__preview">
    <el-image
      :fit="fit"
      :initial-index="4"
      :preview-src-list="urlList"
      :src="imgUrl + url"
      :zoom-rate="1.2"
      preview-teleported
      style="width: 100px; height: 100px"
    />
  </div>
</template>

<style lang="scss" scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>
